<!--人工监测-->
<template>
	<page-meta :page-font-size="baseFontSize + 'rpx'" :root-font-size="baseFontSize + 'rpx'"></page-meta>
	<view class="content">
		<!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
		<z-paging
			ref="paging"
			v-model="dataList"
			:auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false"
			:refresher-status.sync="refresherStatus"
			@query="loadList"
		>
			<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
			<view style="z-index: 100; position: sticky; top: 0">
				<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
				<app-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></app-tabs>
				<!-- <uni-search-bar v-model="searchValue" bgColor="#F7F8FA" radius="5" placeholder="请输入设施/部位/构件名称" clearButton="auto" cancelButton="none" @input="search" /> -->
			</view>
			<!-- 自定义下拉刷新view -->
			<!-- <template #refresher>
				<custom-refresher :status="refresherStatus" />
			</template> -->
			<view class="item p-item" v-for="(item, index) in dataList">
				<view
					class="item"
					@tap="
						navTo(
							`/pages/richangxuncha/rengongjiancexiangqin?id=${item.artificialReportId}&projectName=${item.projectName}&facilityName=${item.facilityName}&compName=${
								item.compName
							}&frequencyValue=${item.frequencyValue}&monitorContentList=${item.monitorContentList}`
						)
					"
				>
					<view class="flex justify-between align-center">
						<text class="name">{{ item.taskName || item.projectName }}</text>
						<uni-icons type="forward" size="16" color="#597EF7"></uni-icons>
					</view>
					<view class="flex justify-between align-end">
						<view class="time">
							<view>{{ item.facilityName }}-{{ item.compName }}</view>
							<view>养护周期：{{ item.frequencyValue }}</view>
						</view>
						<view
							class="btn"
							@tap="
								navTo(
									`/pages/addForm/rengongjiance?id=${item.artificialReportId}&projectName=${item.projectName}&facilityName=${item.facilityName}&compName=${
										item.compName
									}&frequencyValue=${item.frequencyValue}&monitorContentList=${item.monitorContentList}`
								)
							"
						>
							任务上报
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import appTabs from '@/components/app-tabs.vue';
import { getArtificialTaskListApi } from '@/api/system/changxiao.js';
export default {
	mixins: [MescrollMixin],
	components: { appTabs },
	data() {
		return {
			list: 20,
			tabIndex: 0,
			tabs: [
				{
					name: '待完成',
					value: 0
				},
				{
					name: '已完成',
					value: 1
				}
			],
			topH: 190,
			dataList: [],
			refresherStatus: 0,
			searchValue: ''
		};
	},
	computed: {
		baseFontSize() {
			return this.$store.getters.fontSize;
		}
	},
	methods: {
		search(e) {
			this.loadList(1, 10);
		},
		tabChange(e) {
			this.$refs.paging.reload();
		},
		loadList(pageNo, pageSize) {
			// 调用接口获取列表数据
			getArtificialTaskListApi({
				// name: this.searchValue,
				isFinished: this.tabIndex,
				pageNo: pageNo,
				pageSize: pageSize
			})
				.then(res => {
					this.$refs.paging.complete(res.data.list);
				})
				.catch(res => {
					this.$refs.paging.complete(false);
				});
		},
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		upCallback() {
			// this.getProductList();
		},
		navTo(path) {
			this.$tab.navigateTo(path);
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
.list-area {
	height: 300upx;
}
.u-page {
	background: #fff;
	height: 100vh;
}
.top-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	padding: 0 22upx;
}
.btn {
	color: #fff;
	width: 160upx;
	height: 48upx;
	background: #597ef7;
	border-radius: 8upx;
	color: #fff;
	line-height: 48upx;
	text-align: center;
}
.uni-searchbar {
	background: #f1f1f1;
}
</style>
